<template>
  <div>
    <Row>
      <Col span="12">
        <div :style="{border:borderStyle,height: (tabHeight+30)+'px'}" style="margin: 5px 6px;" ref="upDiv">
          <Upload
            multiple
            type="drag"
            :format="['hex']"
            :max-size="2048"
            :on-exceeded-size="handleMaxSize"
            :on-success="handleSuccess"
            :before-upload="handleBeforeUpload"
            :on-format-error="handleFormatError"
            :action="uploadUrl"
            name='upload'
            style="padding: 40px">
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff" ></Icon>
              <p>点击文件上传</p>
            </div>
          </Upload>
        </div>
      </Col>
      <Col span="12">
        <Row style="font-size: 18px;;margin-bottom: 12px;">
          上传列表
        </Row>
        <Row>
          <Table :height="tabHeight" :columns="columns" :data="deviceUploadList" ref="tab"></Table>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
  import urlSource from '@/api/urlSource'

  export default {
    name: 'packageUpload',
    components: { },
    data(){
      return {
        columns: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '文件名称',
            key: 'packageName'
          },
          {
            title: '上传时间',
            key: 'uploadTime',
            align: 'center'
          },
          {
            title: '上传地址',
            key: 'packageUrl',
          },
        ],
        uploadUrl: urlSource.apiUrl + "file/upload",
        uploadList: [],
        deviceUploadList: [],
        tabHeight: '',
        tabHeightTemp: '',
        borderStyle: '1px solid #dddee1',
      }
    },
    methods:{
      handleRemove (file) {
        const fileList = this.$refs.upload.x;
        this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      },
      handleSuccess (res, file) {
        file.url = urlSource.imageUrl + 'icon/hex_ico.png';
        //设备升级包上传成功后，服务器内存存储所有升级包
        this.getInstallPack2Server();
      },
      getInstallPack2Server(){
        let url = urlSource.apiUrl + "file/installPackage";
        this.$http.get(url).then(res => {
          //展示安装包列表
          this.getInstallPackList();
        }).catch(err => {
        })
      },
      getInstallPackList(){
        let url = urlSource.apiUrl + "deviceUpgrade/getDeviceUpgradePacks";
        this.$http.post(url).then(res => {
          this.deviceUploadList = res.data;
        }).catch(err => {
        })
      },
      handleFormatError (file) {
        this.$Notice.warning({
          title: '文件格式错误',
          desc: '升级包' + file.name + '格式错误,正确格式为 .hex.'
        });
      },
      handleMaxSize (file) {
        this.$Notice.warning({
          title: '文件大小错误',
          desc: '升级包' + file.name + '太大,不能超过2M.'
        });
      },
      handleBeforeUpload () {
        const check = this.uploadList.length < 5;
        if (!check) {
          this.$Notice.warning({
            title: 'Up to five pictures can be uploaded.'
          });
        }
        return check;
      }
    },
    mounted () {
      this.getInstallPackList();
      this.tabHeight = window.innerHeight-150;
    }
  }
</script>

<style scoped lang="less">

</style>
